<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style-type: none;
      }
      .box {
        position: relative;
        width: 630px;
        height: 315px;
        background-color: #ff8500;
        border-radius: 10px;
      }
      .prev {
        position: absolute;
        top: 50%;
        margin-top: -15px;
        width: 20px;
        height: 30px;
        border-radius: 0 15px 15px 0;
        line-height: 30px;
        align-content: center;
        text-decoration: none;
        background-color: rgba(0, 0, 0, 0.3);
        color: white;
      }
      .next {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -15px;
        width: 20px;
        height: 30px;
        border-radius: 15px 0 0 15px;
        line-height: 30px;
        text-align: center;
        text-decoration: none;
        background-color: rgba(0, 0, 0, 0.3);
        color: white;
      }
      .box ul {
        position: absolute;
        bottom: 10px;
        left: 50%;
        margin-left: -35px;
        width: 70px;
        height: 14px;
        background-color: rgba(256, 256, 256, 0.3);
        border-radius: 5px;
      }
      .box ul li {
        float: left;
      }
      .box ul li a {
        display: block;
        width: 8px;
        height: 8px;
        margin: 3px;
        background-color: white;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <a href="#" class="prev"><</a>
      <a href="#" class="next">></a>
      <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
      </ul>
    </div>
  </body>
</html>
